<!--
 * @Description: 游学项目详情页
 * @Author: rendc
 * @Date: 2021-07-12 14:51:58
 * @LastEditors: rendc
 * @LastEditTime: 2021-07-13 14:51:10
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/details.css">
  <title>行学天下-游学项目详情</title>
  <script type="text/javascript" src="js/jquery.js">
  </script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="details">
    <!-- 头部 -->
    <div class="header">
      <el-popover placement="top-start" title="提示" width="200" trigger="hover" content="点击此处，返回首页。">
        <div slot="reference" class="headLeft">
          <div class="logo" title="返回首页" @click="toIndex()">
            行学天下
          </div>
          <div class="title" title="返回首页" @click="toIndex()">
            行学天下
          </div>
        </div>
      </el-popover>

      <div class="headRight">
        <div class="callMe">
          <a href="#callMe">
            <img src="image/callMe.png" alt="图片丢失了">
            联系我们
          </a>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- {{projectDetails}} -->
      <div class="title">
        {{projectDetails.name}}
      </div>
      <div class="time">
        {{formatDate(projectDetails.beginTime)}} ~ {{formatDate(projectDetails.endTime)}} ｜ {{projectDetails.region}}
      </div>
      <div class="details" v-html="projectDetails.details">
        <!-- {{htmlToText(projectDetails.details)}} -->
      </div>
      <div class="title">
        联系老师信息
      </div>
      <div v-if="projectDetails.teacher" class="details">
        {{projectDetails.teacher.realname}}
        {{projectDetails.teacher.telephone}}
      </div>
      <div class="toIndex">
        <div class="myBtn" @click="toIndex()">点击此处返回首页</div>
        <el-button plain type="primary" @click="toIndex()">点击此处返回首页</el-button>
      </div>
      <!-- 返回顶部 -->
      <el-backtop :bottom=200></el-backtop>
    </div>
    <!-- 页面底部信息 -->
    <div class="footer">
      <div id="callMe" class="callMe">
        联系我们（工作时间：9:00-17:30）
        021-56778147
        <a href="https://briup.cn">https://briup.cn</a>
        <!-- 通过qq实现在线客服功能 -->
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1729448763&Site=%e6%9d%b0%e6%99%ae&Menu=yes">在线客服</a>
      </div>
      <div class="beiAn">
        <a href="http://beian.miit.gov.cn">
          京ICP备XXXXXXX号
        </a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo">公安备案号00000000</a>
      </div>
      <div class="callMe">
        ©1999-2021杰普软件科技有限公司
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#details',
    data: {
      projectDetails: [],
    },
    created() {
      var id = window.location.search.split('=')[1];
      // console.log(id);
      axios.get('http://47.94.46.113:8888/index/project/findById?id=' + id).then((res) => {
        this.projectDetails = res.data.data
      })
    },
    methods: {
      // 将时间戳格式化
      formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
      },
      // 将html转化成正常文本
      // htmlToText(html) {
      //   return html.replace(new RegExp('<.+?>', 'g'), '')
      // },
      // 返回首页
      toIndex() {
        window.location.href = 'index.html'
      }
    }
  })
</script>

</html>